<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>透视悬停按钮</title>
    <style>
    html{
        /*font-size: 10px;*/
    }
    @media screen and (min-width: 300px) {
        body {background-color: skyblue;
        }}
    /*@media screen and (min-width: 300px) {*/
        /*body {*/
            /*background-color: lightblue;*/
        /*}}*/

    body{
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*ul{*/
        /*padding: 0;*/
        /*list-style-type:none;*/
    /*}*/
    /*ul li{*/
        /*box-sizing:border-box;*/
        /*width: 15em;*/
        /*height: 3em;*/
        /*font-size: 20px;*/
        /*border-radius: 0.5em;*/
        /*margin: 0.5em;*/
        /*box-shadow: 0 0 1em rgba(0,0,0,0.2);*/
    /*}*/
    /*ul li:nth-child(odd){*/
        /*background: linear-gradient(to right,rgba(,0,0,0.8) ,transparent );*/
    /*}*/
    /*ul li:nth-child(even) {*/
        /*background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);*/
    /*}*/
    /*ul li{*/
        /*color: white;*/
        /*font-family: sans-serif;*/
        /*text-transform: capitalize;*/
        /*line-height: 3em;*/
        /*-webkit-transition: 0.3s ease;*/
        /*-moz-transition: 0.3s ease;*/
        /*-ms-transition: 0.3s ease;*/
        /*-o-transition: 0.3s ease;*/
        /*transition: 0.3s ease;*/
        /*cursor: pointer;*/
    /*}*/
    /*ul li:nth-child(odd){*/
        /*text-align: left;*/
        /*padding-left: 10%;*/
    /*}*/
    /*ul li:nth-child(even){*/
        /*text-align: right;*/
        /*padding-right: 10%;*/
    /*}*/
    /*ul li:nth-child(odd){*/
        /*transform: perspective(500px) rotateY(45deg);*/
    /*}*/
    /*ul li:nth-child(even){*/
        /*transform: perspective(500px) rotateY(-45deg);*/
    /*}*/
    /*ul li:nth-child(odd):hover{*/
        /*transform: perspective(200px) rotateY(45deg);*/
        /*padding-left: 5%;*/
    /*}*/
    /*ul li:nth-child(even):hover{*/
        /*transform: perspective(200px) rotateY(-45deg);*/
        /*padding-right: 5%;*/
    /*}*/
</style>
</head>
<body>123213213123
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</body>

</html>